/* 
src/router router文件夹就是存放路由相关的文件的
路由基本使用
1:装包 npm i vue-router
2:导入 import VueRouter from 'vue-router'
3.注册 Vue.use(VueRouter)
4:实例化 const router=new VueRouter({
    routes:[
      {
        path:"/",
        component:组件名
      }
    ]
})
暴露出去 export default router

在main.js中引入 import router from '@/router'
注入到new Vue({router})
6.路由出口  router-view 搬运工
*/

/* 要写一个新的页面
  1.在views目录下面创建一个相应的vue文件
  2.配制该文件的路由
  3.开始在相应的vue文件定稿功能
*/

/* 路由抽离 */

/* 1.导入路由 */
import VueRouter from 'vue-router'

/* 2.导入vue */
import Vue from 'vue'

/* 导入login.vue */
import login from '@/views/login/login.vue'

/* 第四天,14.1配置ayout导入组件 */
import layout from '@/views/layout/layout.vue'
/* 第四天:38 实例化前先导入组件 */
import chart from '@/views/layout/chart/chart.vue'
import user from '@/views/layout/user/user.vue'
import question from '@/views/layout/question/question.vue'
import business from '@/views/layout/business/business.vue'
import subject from '@/views/layout/subject/subject.vue'

Vue.use(VueRouter)

/* 3.创建,实例化路由 */
const router = new VueRouter({
  routes: [{
      path: '/',
      //重定向
      redirect: '/login'
    },
    {
      path: '/login',
      component: login
    },
    /* 第四天,14配置ayout路由需要导入组件 */
    {
      path: '/layout',
      component: layout,
      /* 第四天38.配制layout的子路由在layout内做了一个重定向到第一个子路由 */
      redirect: '/layout/chart',
      children: [{
          path: '/layout/chart',
          component: chart,
          /* 第五天 3 配置路由元都加上title*/
          /* 路由元信息 */
          meta:{
            title:'数据概览'
          }
        },
        {
          path: '/layout/user',
          component: user,
          meta:{
            title:'用户列表'
          }
        },
        {
          path: '/layout/question',
          component: question,
          meta:{
            title:'题库列表'
          }
        },
        {
          path: '/layout/business',
          component: business,
          meta:{
            title:'企业列表'
          }

        },
        {
          path: '/layout/subject',
          component: subject,
          meta:{
            title:'学科列表'
          }          
        }
      ]
    }
  ]
})

/* 第五天:2 在router/index.js加入nprogress  */
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'


/* 第五天:1 加入导航守卫 与同一路由跳转错误处理 */
/* 前置守卫:还没有出from路由 */
router.beforeEach((to,from,next)=>{
  /* 第五天2.1 */
  Nprogress.start()

  // window.console.log('to:',to)
  // window.console.log('from:',from)
  // window.console.log('next:',next)
  next() //表示正常通过  不正常通过 next(path)
})

/* 后置守卫:已进入to的路由 */
router.afterEach((to,from)=>{
    /* to:要去的路由的路由信息 相当于相应路由的this.$route */
    //from:从哪来的路由的路由信息  相当于相应路由的this.$route
    // window.console.log('to:',to)

    /* 第五天:4 在路由后置守卫加入title处理 */
    window.console.log('from:',from)
    document.title='黑马面面---'+to.meta.title
    /* document.getElementById('title').innerText='黑马面面---'+to.meta.title */
    /* 第五天2.2 */
    Nprogress.done()

})
const originalReplace=VueRouter.prototype.push
VueRouter.prototype.push=function push (location){
  return originalReplace.call(this,location).catch(err=>err)
}


/*4.暴露出去一个router(路由实例化对象)  */
export default router